<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>

<meta charset="utf-8" />
<title>天天点餐</title>

<link th:href="@{/css/bootstrap.min.css}" type="text/css"
	rel="stylesheet" />
<link th:href="@{/css/bootstrap-responsive.min.css}" type="text/css"
	rel="stylesheet" />
<link th:href="@{/css/button.css}" rel="stylesheet" />
<script th:src="@{/js/jquery-3.2.1.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<link th:href="@{/css/dcstyle.css}" rel="stylesheet" type="text/css"
	media="all" />
<!--//theme-style-->
</head>
<body class="no-skin">
	<div class="header head">
		<div class="container">
			<div class="logo animated wow pulse" data-wow-duration="1000ms"
				data-wow-delay="500ms">
				<h1>
					<a href="#"><span>C</span><img th:src="@{/img/dc/oo.png}"
						alt="" /><img th:src="@{/img/dc/oo.png}" alt="" />kery</a>
				</h1>
			</div>
			<div th:if="${session.user != null}" class="nav-icon">
				<h4 id="user" class="text-info" th:text="${session.user.name}"></h4>
			</div>
			<div class="nav-icon">
				<script>
					$('.navicon').on('click', function(e) {
						e.preventDefault();
						$(this).toggleClass('navicon--active');
						$('.toggle').toggleClass('toggle--active');
					});
				</script>
			</div>
			<div class="clearfix"></div>
		</div>
		<!-- start search-->
	</div>
	<div layout:fragment="content" style="margin-top: 80px;">
		<div class="main-inner">
			<div class="container">
				<div class="span12">
					<div class="info-box">
						<a
							class="button button-block button-rounded button-action button-large add-food">点菜</a>
						<table id="showTable"
							class="table table-striped table-bordered table-hover">
							<thead>
								<tr>
									<th>菜系</th>
									<th>菜名</th>
									<th>价格</th>
									<th>会员价</th>
									<th>图片</th>
									<th>数量</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>
										<!-- <input id='min' name='' type='button' value='-' />
							 <input id='text_box' name='' type='text' value='1' style='width:10px;text-align:center'/>
							 <input id='add' name='add' type='button' value='+' /> -->

									</td>
								</tr>
							</tbody>
						</table>
						<h1 id="tableId" class="hidden" th:text="${session.tableId}"></h1>
						<table id="showTotal">
						</table>
						<div style="text-align: right">
							<button type="button" id="returns" class="btn btn-default">返回</button>
							<button id="OrderSaveBtn" type="button" class="btn btn-primary">提交订单</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- /container -->
		<!-- /main-inner -->

		<div class="modal hide" id="addFoodModal" tabindex="-1" role="dialog"
			aria-labelledby="addFoodModallabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="addFoodModallabel">点菜</h4>
					</div>
					<div class="modal-body">
						<form id="addFoodForm" action="/food/addFood" method="POST"
							enctype="multipart/form-data">
							<div class="form-group">
								<label>选择菜系：</label><select name="foodType" id="foodType"></select><br />
								<label>菜名：</label><select name="foodName" id="foodName"></select><br />
								<label>价格：</label><span class="price"></span><br /> <label>会员价格：</label><span
									class="mPrice"></span><br /> <label>图片：</label>
								<div class="image"></div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button id="addFoodSaveBtn" type="button" class="btn btn-primary"
							data-dismiss="modal">确认</button>
					</div>
				</div>
			</div>
		</div>

		<div class="modal fade hide" id="showOrderModal" tabindex="-1"
			role="dialog" aria-labelledby="showTestModallabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h1 class="modal-title" id="showTestModallabel" align="center">你已完成点餐！</h1>
					</div>
					<div class="modal-body" style="font-size:30px;">
					<table id="showOrderId" >
					</table >
					<br />
						<label>餐桌:<span class="tableId"></span>号桌
						</label><br /> <label>点餐时间：<span class="time"></span></label><br />
						<table id="showOrder"
							class="table table-striped table-bordered table-hover">
							<thead>
								<tr>
									<th>菜单</th>
									<th>价格</th>
								</tr>
							</thead>
							<tbody>

							</tbody>
						</table>
						<table id="showOrderTotal">
						</table>
					</div>
					<div class="modal-footer">
						<button type="button" id="addOrderSaveBtn" class="btn btn-primary"
							data-dismiss="modal">确定</button>
					</div>
				</div>
			</div>
		</div>


		<script th:src="@{/js/jquery-migrate-1.2.1.min.js}"></script>
		<script th:src="@{/js/jquery.jqprint-0.3.js}"></script>
		<script type="text/javascript">
			/*<![CDATA[*/
			var user = $("#user").text();
			var totalMoney = 0;
			$('#showOrderModal').on("hide.bs.modal", function() {
				$("#showOrderModal tbody").find("tr").remove();
			});
			$('#returns').click(function() {
				window.location.href = '/ttdc';
			});
			$('#addOrderSaveBtn')
					.click(
							function() {
								var tableId = $("#tableId").text();
								var orderDate = $("#showOrderModal .time")
										.text();
								var orderStatus = 0;
								$
										.ajax({
											url : "/order/addOrder",
											type : "post",
											data : {
												tableId : tableId,
												orderDate : orderDate,
												totalPrice : totalMoney,
												orderStatus : orderStatus

											},
											dataType : "json",
											success : function(data) {
												if (data.success) {
													alert("订单提交成功！");
													$
															.ajax({
																url : '/order/getOrderId',
																dataTye : 'json',
																type : 'post',
																data : {
																	tableId : tableId
																},
																success : function(
																		data) {
																	var orderId = data.id;
																	var row = $(
																			'#showTable')
																			.find(
																					"tr");
																	var rowNum = row.length;
																	for (var i = 2; i < rowNum; i++) {
																		var foodId = row
																				.eq(
																						i)
																				.find(
																						"td")
																				.eq(
																						7)
																				.text();
																		var foodCount = row
																				.eq(
																						i)
																				.find(
																						"td")
																				.eq(
																						5)
																				.find(
																						"input")
																				.eq(
																						1)
																				.val();
																		$
																				.ajax({
																					url : "/order/addOrderDetail",
																					type : "post",
																					data : {
																						orderId : orderId,
																						foodId : foodId,
																						foodCount : foodCount

																					},
																					dataType : "json",
																					success : function(
																							data) {
																						var tablesStatus = 1;
																						var tableName = '第'
																								+ tableId
																								+ '号餐桌';
																						$
																								.ajax({
																									type : "post",
																									url : "/table/uptadeTable",
																									data : {
																										id : tableId,
																										tableName : tableName,
																										tablesStatus : tablesStatus,

																									},
																									dataType : "json",
																									success : function(
																											data) {
																										$('#showOrderId').html(
																												'<h1>订单号' + orderId + '</h1>');
																												var row = $('#showTable').find("tr");
																												var rowNum = row.length;
																												if (rowNum != 2) {
																													for (var i = 2; i < rowNum; i++) {
																														var foodname = row.eq(i).find("td").eq(1)
																																.text();
																														var num = row.eq(i).find("td").eq(5).find(
																																"input").eq(1).val();
																														if (user != null) {
																															var price = row.eq(i).find("td").eq(3)
																																	.text();
																														}
																														if (user == null) {
																															var price = row.eq(i).find("td").eq(2)
																																	.text();
																														}
																														var priceTotal = parseFloat(price) * num;
																														var htmlString = "";
																														htmlString += "<tr style='font-size:50px'>";
																														htmlString += "<td>" + foodname + '*' + num
																																+ "</td>";
																														htmlString += "<td>" + '￥' + priceTotal
																																+ "</td>";
																														htmlString += "</tr>";

																														$('#showOrder').append(htmlString);
																													}									

																													$('#showOrderTotal').html(
																															'<h1>总金额：￥' + totalMoney + '元</h1>');
																													//$('#showOrderModal').modal('show');
																												}
																												$("#showOrderModal .modal-body")
																												.jqprint();

																									}
																								});
																					}
																				});
																	}

																}

															});

												} else {
													alert("订单提交失败！");
												}
											}
										});
							});
			$('#OrderSaveBtn').click(
					function() {
						var tableId = $("#tableId").text();
						$('#showOrderModal .tableId').text(tableId);
						var date = new Date();
						var seperator1 = "-";
						var seperator2 = ":";
						var month = date.getMonth() + 1;
						var strDate = date.getDate();
						var Hours = date.getHours()
						var Minutes = date.getMinutes();
						var Seconds = date.getSeconds();
						if (month >= 1 && month <= 9) {
							month = "0" + month;
						}
						if (strDate >= 0 && strDate <= 9) {
							strDate = "0" + strDate;
						}
						if (Hours >= 0 && Hours <= 9) {
							Hours = "0" + Hours;
						}
						if (Minutes >= 0 && Minutes <= 9) {
							Minutes = "0" + Minutes;
						}
						if (Seconds >= 0 && Seconds <= 9) {
							Seconds = "0" + Seconds;
						}
						var time = date.getFullYear() + seperator1 + month
								+ seperator1 + strDate + " " + Hours
								+ seperator2 + Minutes + seperator2 + Seconds;
						$('#showOrderModal .time').text(time);
						var row = $('#showTable').find("tr");
						var rowNum = row.length;
						if (rowNum != 2) {
							for (var i = 2; i < rowNum; i++) {
								var foodname = row.eq(i).find("td").eq(1)
										.text();
								var num = row.eq(i).find("td").eq(5).find(
										"input").eq(1).val();
								if (user != null) {
									var price = row.eq(i).find("td").eq(3)
											.text();
								}
								if (user == null) {
									var price = row.eq(i).find("td").eq(2)
											.text();
								}
								var priceTotal = parseFloat(price) * num;
								var htmlString = "";
								htmlString += "<tr>";
								htmlString += "<td>" + foodname + '*' + num
										+ "</td>";
								htmlString += "<td>" + '￥' + priceTotal
										+ "</td>";
								htmlString += "</tr>";

								$('#showOrder').append(htmlString);
							}

							htmlString += "<tr>";
							htmlString += "<td>" + '总金额' + "</td>";
							htmlString += "<td>" + '￥' + totalMoney + "</td>";
							htmlString += "</tr>";

							$('#showOrderTotal').html(
									'<h1>总金额：￥' + totalMoney + '元</h1>');
							$('#showOrderModal').modal('show');
						}
						if (rowNum == 2) {
							alert("请点菜");
						}
					});

			$(document)
					.ready(
							function() {
								$('.add-food')
										.click(
												function() {
													$
															.ajax({
																type : "POST",
																url : "/food/getAllFoodType",
																dataType : "json",
																success : function(
																		data) {
																	var foodType = '';
																	$(
																			'#addFoodForm #foodType')
																			.html(
																					foodType);
																	for (var i = 0; i < data.length; i++) {
																		foodType += '<option value="'+data[i].id+'">'
																				+ data[i].typeName
																				+ '</option>';
																	}
																	$(
																			'#addFoodForm #foodType')
																			.append(
																					foodType);
																	var foodTypeId = $(
																			'#addFoodForm select[name="foodType"]')
																			.val();
																	food(foodTypeId);
																	$(
																			'#addFoodModal')
																			.modal(
																					'show');
																}
															});
												});
							});

			$("#foodType").change(
					function() {
						var foodTypeId = $(
								'#addFoodForm select[name="foodType"]').val();
						food(foodTypeId);
					})

			function food(foodTypeId) {
				$.ajax({
					type : "post",
					url : "/table/food",
					dataTye : "json",
					data : {
						foodTypeId : foodTypeId,
					},
					success : function(data) {
						var foodName = '';
						$('#addFoodForm #foodName').html(foodName);
						for (var i = 0; i < data.length; i++) {
							foodName += '<option value="'+data[i].id+'">'
									+ data[i].foodName + '</option>';
							$('#addFoodForm .price').text(data[0].price);
							$('#addFoodForm .mPrice').text(data[0].mPrice);
							$('#addFoodForm .image').html(
									'<img alt="图片" src=/food/getImage?image='
											+ data[0].image
											+ ' class="food-image"></img>');
						}
						$('#addFoodForm #foodName').append(foodName);
					}
				});
			}

			$("#addFoodForm #foodName")
					.change(
							function() {
								var id = $(
										'#addFoodForm select[name="foodName"]')
										.val();
								$
										.ajax({
											type : "post",
											url : "/table/foodName",
											dataTye : "json",
											data : {
												id : id,
											},
											success : function(data) {
												$('#addFoodForm .price').text(
														data.price);
												$('#addFoodForm .mPrice').text(
														data.mPrice);
												$('#addFoodForm .image')
														.html(
																'<img alt="图片" src=/food/getImage?image='
																		+ data.image
																		+ ' class="food-image"></img>');
											}

										});
							})
			$('#addFoodSaveBtn')
					.click(
							function() {
								var judge = true;
								var foodName = $("#addFoodForm #foodName")
										.find("option:selected").text();
								var foodNameId = $("#addFoodForm #foodName")
										.find("option:selected").val();
								//alert(foodNameId);
								var row = $('#showTable').find("tr");
								var rowNum = row.length;
								for (var i = 2; i < rowNum; i++) {
									var foodname = row.eq(i).find("td").eq(1)
											.text();
									if (foodname == foodName) {
										judge = false;
										var t = row.eq(i).find("td").eq(5)
												.find("input").eq(1);
										// 给获取的val加上绝对值，避免出现负数
										t.val(Math.abs(parseInt(t.val())) + 1);
										if (user != null) {
											var price = row.eq(i).find("td")
													.eq(3).text();
										}
										if (user == null) {
											var price = row.eq(i).find("td")
													.eq(2).text();
										}
										totalMoney += parseFloat(price);
										$('#showTotal').html(
												'<h1>总金额：￥' + totalMoney
														+ '元</h1>');
										if (parseInt(t.val()) != 1) {
											$('#min').attr('disabled', false);
										}
										;
									}

								}
								if (judge) {
									var foodTypeId = $("#foodType").find(
											"option:selected").text();
									var price = $("#addFoodForm .price").text();
									var mPrice = $("#addFoodForm .mPrice")
											.text();
									var imagesrc = $('#addFoodForm img').attr(
											'src');
									var htmlString = "";
									htmlString += "<tr>";
									htmlString += "<td>" + foodTypeId + "</td>";
									htmlString += "<td>" + foodName + "</td>";
									htmlString += "<td>" + price + "</td>";
									htmlString += "<td>" + mPrice + "</td>";
									htmlString += "<td>"
											+ "<img class='food-image' alt='图片' src='" + imagesrc + "'></img>"
											+ "</td>";
									htmlString += "<td>"
											+ "<input id='min' name='min' type='button' value='-' />"
											+ "<input id='text_box' name='' type='text' value='1' style='width:15px;text-align:center'/>"
											+ "<input id='add' name='add' type='button' value='+' />"
											+ "</td>";
									htmlString += "<td>"
											+ "<input id='del' name='del' type='button' value='删除' onclick='return comfirm()'/>"
											+ "</td>";
									htmlString += "<td style='display:none'>"
											+ foodNameId + "</td>";
									htmlString += "</tr>";

									$('#showTable').append(htmlString);
									if (user != null) {
										totalMoney += parseFloat(mPrice);
										$('#showTotal').html(
												'<h1>总金额：￥' + totalMoney
														+ '元</h1>');
									}
									if (user == null) {
										totalMoney += parseFloat(price);
										$('#showTotal').html(
												'<h1>总金额：￥' + totalMoney
														+ '元</h1>');
									}

								}
							});

			/*]]>*/
		</script>
		<script>
			//数量增加操作
			$("tbody").on("click", "#add", (function() {
				//获得文本框对象
				var t = $(this).siblings().eq(1);
				// 给获取的val加上绝对值，避免出现负数
				t.val(Math.abs(parseInt(t.val())) + 1);
				if (user != null) {
					var price = $(this).parent().siblings().eq(3).text();
				}
				if (user == null) {
					var price = $(this).parent().siblings().eq(2).text();
				}
				totalMoney += parseFloat(price);
				$('#showTotal').html('<h1>总金额：￥' + totalMoney + '元</h1>');
				if (parseInt(t.val()) != 1) {
					$('#min').attr('disabled', false);
				}
				;
			}))
			//数量减少操作
			$("tbody").on("click", "#min", (function() {
				var t = $(this).siblings().eq(0);
				if (t.val() == 1) {
					$('#min').attr('disabled', true);
				}
				;
				if (parseInt(t.val()) != 1) {
					t.val(Math.abs(parseInt(t.val())) - 1);
					if (user != null) {
						var price = $(this).parent().siblings().eq(3).text();
					}
					if (user == null) {
						var price = $(this).parent().siblings().eq(2).text();
					}
					totalMoney -= parseFloat(price);
					$('#showTotal').html('<h1>总金额：￥' + totalMoney + '元</h1>');
					if (parseInt(t.val()) == 1) {
						$('#min').attr('disabled', true);
					}
					;
				}
			}))

			$("tbody").on(
					"click",
					"#del",
					(function() {
						if (confirm("确认删除吗？") == false) {
							return false;
						}
						if (user != null) {
							var price = $(this).parent().siblings().eq(3)
									.text();
						}
						if (user == null) {
							var price = $(this).parent().siblings().eq(2)
									.text();
						}
						var num = $(this).parent().siblings().eq(5).find(
								"#text_box").val();
						var minMoney = parseFloat(price) * num;
						totalMoney -= minMoney;
						$('#showTotal').html(
								'<h1>总金额：￥' + totalMoney + '元</h1>');
						$(this).parent().parent().remove();
					}))
		</script>
		<script>
			/* 添加图片后显示图片  */
			/* <![CDATA[ */
			$()
					.ready(
							function() {
								$(function() {
									$('#addFoodForm input[name="image"]')
											.change(
													function() {
														var $file = $(this);
														var fileObj = $file[0];
														var windowURL = window.URL
																|| window.webkitURL;
														var dataURL;
														var $img = $("#addFoodForm #preview");

														if (fileObj
																&& fileObj.files
																&& fileObj.files[0]) {
															dataURL = windowURL
																	.createObjectURL(fileObj.files[0]);
															$img.attr('src',
																	dataURL);
														} else {
															dataURL = $file
																	.val();
															var imgObj = document
																	.getElementById("preview");
															// 两个坑:
															// 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
															// 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
															imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
															imgObj.filters
																	.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
														}
													});
								});
							});
			$()
					.ready(
							function() {
								$(function() {
									$('#updateFoodForm input[name="image"]')
											.change(
													function() {
														var $file = $(this);
														var fileObj = $file[0];
														var windowURL = window.URL
																|| window.webkitURL;
														var dataURL;
														$('#brose').hide();
														var $img = $("#updateFoodForm #preview");

														if (fileObj
																&& fileObj.files
																&& fileObj.files[0]) {
															dataURL = windowURL
																	.createObjectURL(fileObj.files[0]);
															$img.attr('src',
																	dataURL);
														} else {
															dataURL = $file
																	.val();
															var imgObj = document
																	.getElementById("preview");
															// 两个坑:
															// 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
															// 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
															imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
															imgObj.filters
																	.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
														}
													});
								});
							});
			/* ]]> */
		</script>
	</div>
</body>
</html>
